<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>慕课网-绝对定位整页布局演示</title>
    <style>
        body {
            font-family: 'microsoft yahei';
        }

        /* wechat.css */

        body {
            margin: 0;
            -webkit-user-select: none;
            user-select: none;
            -ms-touch-action: none;
        }

        /* construction */

        html,
        body,
        .page {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .page {
            position: absolute;
            left: 0;
            top: 0;
        }

        body {
            background-color: #ebebeb;
            font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
        }

        a {
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
            font-weight: 400;
        }

        ul,
        ol {
            margin: 0;
            list-style-type: none;
        }

        .header,
        .footer,
        .content {
            position: absolute;
            left: 0;
            right: 0;
        }

        .header {
            height: 48px;
            padding: 0 5px;
            background-color: #21292B;
            color: #fff;
            top: 0;
            z-index: 1;
        }

        .header>h1 {
            line-height: 48px;
            margin: 0 0 0 10px;
            font-size: 18px;
            float: left;
        }

        .header>a {
            display: inline-block;
            width: 48px;
            height: 48px;
            background-size: 48px 144px;
            text-indent: -9em;
            overflow: hidden;
        }

        .header>.icon-search,
        .header>.icon-add {
            float: right;
        }

        .footer {
            height: 52px;
            border-top: 1px solid #dfdfdf;
            background-color: #fcfcfc;
            bottom: 0;
            z-index: 1;
        }

        .footer>a {
            width: 25%;
            text-align: center;
            color: #999;
            float: left;
            font-size: 14px;
        }

        .footer>a>i {
            display: block;
            height: 35px;
            margin-bottom: -3px;
            background-size: 35px 280px;
        }

        .footer>.active {
            color: #45c018;
        }

        .content {
            top: 48px;
            bottom: 53px;
            overflow: auto;
        }

        .icon-search,
        .icon-back,
        .icon-add {
            background: url(http://img.mukewang.com/547d339b000188bb00960288.png) no-repeat;
        }

        .icon-back {
            background-position: 0 -96px;
        }

        .icon-add {
            background-position: 0 -48px;
        }

        .icon-wechat,
        .icon-contacts,
        .icon-finds,
        .icon-mes {
            background: url(http://img.mukewang.com/547d33970001444d00700560.png) no-repeat center top;
        }

        .active .icon-wechat {
            background-position: center -35px;
        }

        .icon-contacts {
            background-position: center -70px;
        }

        .active .icon-contacts {
            background-position: center -105px;
        }

        .icon-finds {
            background-position: center -140px;
        }

        .active .icon-finds {
            background-position: center -175px;
        }

        .icon-mes {
            background-position: center -210px;
        }

        .active .icon-mes {
            background-position: center -245px;
        }

        .icon-find {
            background: url(icon-find.png) no-repeat;
            background-size: 28px 210px;
        }

        .icon-find-2 {
            background-position: 0 -30px;
        }

        .icon-find-3 {
            background-position: 0 -60px;
        }

        .icon-find-4 {
            background-position: 0 -90px;
        }

        .icon-find-5 {
            background-position: 0 -120px;
        }

        .icon-find-6 {
            background-position: 0 -150px;
        }

        .icon-find-7 {
            background-position: 0 -180px;
        }

        .icon-me {
            background: url(icon-me.png) no-repeat;
            background-size: 28px 120px;
        }

        .icon-me-2 {
            background-position: 0 -30px;
        }

        .icon-me-3 {
            background-position: 0 -60px;
        }

        .icon-me-4 {
            background-position: 0 -90px;
        }


        .wechat-list {
            display: block;
            height: 64px;
            padding: 8px 12px;
            box-sizing: border-box;
            border-bottom: 1px solid #d7d7d7;
            background-color: #fff;
        }

        .wechat-list:last-child {
            border-bottom: 0;
        }

        .wechat-list>img {
            width: 48px;
            height: 48px;
            float: left;
        }

        .wechat-list>.cell {
            padding-left: 58px;
            line-height: 24px;
            color: #333;
        }

        .wechat-h-time {
            overflow: hidden;
        }

        .wechat-h-time>h5 {
            font-size: 100%;
            float: left;
        }

        .wechat-h-time>time {
            font-size: 12px;
            color: #b9b9b9;
            float: right;
        }

        .wechat-h-time .business {
            color: #54688D;
        }

        .wechat-h-time+p {
            margin: 0 20px 0 0;
            font-size: 14px;
            color: #a8a8a8;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .wechat-detail {
            position: relative;
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="header">
            <h1>慕课网</h1>
            <a href="javascript:" class="icon-add">添加</a>
            <a href="javascript:" class="icon-search">搜索</a>
        </div>
        <div class="content">
            <div class="">
                <a href="http://www.imooc.com/learn/192" class="wechat-list">
                    <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                    <div class="cell">
                        <div class="wechat-h-time">
                            <h5>张鑫旭</h5>
                            <time>早上09:51</time>
                        </div>
                        <p>CSS深入理解值绝对定位</p>
                    </div>
                </a>
                <a href="http://www.imooc.com/learn/192" class="wechat-list">
                    <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                    <div class="cell">
                        <div class="wechat-h-time">
                            <h5>张鑫旭</h5>
                            <time>早上09:38</time>
                        </div>
                        <p>如果高度不够，可以手动缩小浏览器高度</p>
                    </div>
                </a>
                <a href="http://www.imooc.com/learn/192" class="wechat-list">
                    <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                    <div class="cell">
                        <div class="wechat-h-time">
                            <h5>张鑫旭</h5>
                            <time>早上08:47</time>
                        </div>
                        <p>此demo是本系列最后一个demo</p>
                    </div>
                </a>
                <a href="http://www.imooc.com/learn/192" class="wechat-list">
                    <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                    <div class="cell">
                        <div class="wechat-h-time">
                            <h5>张鑫旭</h5>
                            <time>早上08:36</time>
                        </div>
                        <p>此demo需要在高级浏览器中查看</p>
                    </div>
                </a>
                <a href="http://www.imooc.com/learn/192" class="wechat-list">
                    <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                    <div class="cell">
                        <div class="wechat-h-time">
                            <h5>张鑫旭</h5>
                            <time>昨天</time>
                        </div>
                        <p>重在原理展示，结构可多变。例如，header放在page外面~~</p>
                    </div>
                </a>
                <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
                    <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                    <div class="cell">
                        <div class="wechat-h-time">
                            <h5>张鑫旭</h5>
                            <time>昨天</time>
                        </div>
                        <p>最近鄙人整了个名叫Mobilebone的开源项目</p>
                    </div>
                </a>
                <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
                    <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                    <div class="cell">
                        <div class="wechat-h-time">
                            <h5>张鑫旭</h5>
                            <time>星期三</time>
                        </div>
                        <p>就是依赖绝对定位整体布局，大家可以前去围观</p>
                    </div>
                </a>
                <a href="http://www.imooc.com/learn/192" class="wechat-list">
                    <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                    <div class="cell">
                        <div class="wechat-h-time">
                            <h5 class="business">慕课网</h5>
                            <time>星期三</time>
                        </div>
                        <p>
                            <img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16">
                        </p>
                    </div>
                </a>
                <a href="http://www.imooc.com/learn/121" class="wechat-list">
                    <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                    <div class="cell">
                        <div class="wechat-h-time">
                            <h5>张鑫旭</h5>
                            <time>星期三</time>
                        </div>
                        <p>CSS深入理解之浮动</p>
                    </div>
                </a>
                <a href="http://www.imooc.com/learn/121" class="wechat-list">
                    <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                    <div class="cell">
                        <div class="wechat-h-time">
                            <h5>张鑫旭</h5>
                            <time>上周</time>
                        </div>
                        <p>同样精彩，欢迎支持~</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="footer">
            <a href="http://www.imooc.com/course/list">
                <i class="icon-wechat"></i>课程
            </a>
            <a href="http://www.imooc.com/wenda">
                <i class="icon-contacts"></i>问答
            </a>
            <a href="http://www.imooc.com/seek/index">
                <i class="icon-finds"></i>求课
            </a>
            <a href="http://www.imooc.com/space/course" class="active">
                <i class="icon-mes"></i>我的课程
            </a>
        </div>
    </div>
</body>

</html>